import React, { Component, Fragment } from 'react';

// React 对高阶组件的官方解释就是高阶组件是：参数为组件，返回值为新组件的函数。
// 我们在构建应用中，用高阶组件（属性代理模式）实现了装饰模式（了解下 ES7 中的装饰器）。
export const test = 1;

// 高阶组件之反向继承
// 反向继承最核心的两个作用，一个是渲染劫持，另一个是操作state吧。反向继承有两种写法，两种写法存在不同的能力。

// export class UmiComponent extends Component {
  // state = {
  //   formValues: {},
  //   searchValues: {
  //     project_id: '',
  //     // index: 0, // queryValues
  //     // limit: 50, // queryValues

  //     merchant_info: '',
  //     phone: '',
  //     pay_type: '',
  //     start_date: '',
  //     end_date: ''
  //   }
  // };

  // componentDidMount () {
  //   // this.dataFetch();
  // }

  // 事件处理



//   render () {
    
//   }
// }



// import OldComponent from "./Component.js"
// const newComponent = (WrapComponent) => {
    
//     return class extends WrapComponent {
//         render() {
//             let props = this.props
//             let newProps = {
//                 @click:() => {},
//                 ...this.props
//             }
//             return <WrapComponent />
//         }
//     }
// }
// export default newComponent(OldComponent)







// imoprt ComponentChild from './ComponentChild.js'
// let iihoc = WrapComponet => class extends WrapComponet {
//     constructor(props) {
//         super(props)
//         this.state = {
//             num: 2000
//         }
//     }
//     componentDidMount() {
//         console.log('iihoc componentDidMount')
//         this.clickComponent()
//     }
//     return (
//         <div>
//             <div onClick={this.clickComponent}>iiHoc 点击</div>
//             <div><WrapComponent /></div>
//         </div>
//     )
// }
// export default iihoc(ComponentChild)


// render() {
//   let renderchild = super.render();
//   let newProps = {
//       ...renderTree.props,
//       onClick: this.handleClick
//   };
//   const newRenderchild = React.cloneElement(
//       renderchild,
//       newProps
//   );
//   return newRenderchild;



// 业务四：工厂模式实现
// 得到程序的需求前，将实现方法相同的部分抽出，写入到高阶函数内部。然后，函数中以不同的组件,以及不同的函数为参数，返回功能相似但完全不同的组件。
// function hocFn({
//     WrappedComponent, 
//     data, 
//     callback = () => console.log('没有传入回调函数')
// }) {
//   // ...并返回另一个组件...
//   return class extends React.Component {
//     constructor(props) {
//       super(props);
//       this.handleChange = this.handleChange.bind(this);
//       this.state = {
//         data: data
//       };
//     }

//     componentDidMount() {
//       callback()
//     }

//     render() {
//       return <WrappedComponent data={this.state.data} {...this.props} />;
//     }
//   };
// }
// //创建不同表格（）
// let TreeTable = hocFn(Tree, data1, () => console.log('创建一个树形表格'))
// let EditTable = hocFn(Form, data1, () => console.log('创建一个可编辑表格'))


// 高阶组件之反向继承

// 反向继承最核心的两个作用，一个是渲染劫持，另一个是操作state吧。反向继承有两种写法，两种写法存在不同的能力。

// 实现一个子组件 ComponentChild.js
// export default class ComponentChild extends Component {
//   constructor(props) {
//     super(props)
//     this.state = {
//       num: 2019
//     }
//   }
//   componentDidMount() {
//     console.log("child component Did Mount")
//   }
//   clickComponent() {
//     console.log("Component click")
//   }
//   render() {
//     return (
//       <div>{this.state.num}</div>
//     )
//   }
// }
// 复制代码装饰组件直接传入
// imoprt ComponentChild from './ComponentChild.js'
// let iihoc = WrapComponet => class extends WrapComponet {
//     constructor(props) {
//         super(props)
//         this.state = {
//             num: 2000
//         }
//     }
//     componentDidMount() {
//         console.log('iihoc componentDidMount')
//         this.clickComponent()
//     }
//     return (
//         <div>
//             <div onClick={this.clickComponent}>iiHoc 点击</div>
//             <div><WrapComponent /></div>
//         </div>
//     )
// }
// export default iihoc(ComponentChild)
// 复制代码这样的方式比属性代理好的是，在外部组件可以调用被继承组件的方法。但不能将被继承的  state 和 钩子覆盖掉。
// 调用 super.render()
// imoprt ComponentChild from './ComponentChild.js'
// let iihoc = WrapComponet => class extends WrapComponet {
//     constructor(props) {
// 	    super(props)
// 	    this.state = {
//             num: 2000
// 	    }
//     }
//     componentDidMount() {
//         console.log('iihoc componentDidMount')
//         this.clickComponent()
//     }
//     return (
//         <div>
//             <div onClick={this.clickComponent}>iiHoc 点击</div>
//             <div>{super.render()}</div>
//         </div>
//     )
// }
// export default iihoc(ComponentChild)
// 复制代码这样的方式，外部组件的 state 可以将，被继承组件的 state 和 钩子函数彻底覆盖掉。同时，外部组件也可以调用被继承组件的方法。
// render() {
//     let renderchild = super.render();
//     let newProps = {
//         ...renderTree.props,
//         onClick: this.handleClick
//     };
//     const newRenderchild = React.cloneElement(
//         renderchild,
//         newProps
//     );
//     return newRenderchild;
// }
// 复制代码解决嵌套地狱（HOOK）
// 高阶组件、render props 等其他抽象层组成的组件会形成“嵌套地狱”。在 React16.8 中的HOOK是对嵌套地狱的一种解决方式吧。
